<template>
  <el-dialog title="用户列表" :visible.sync="dialogUserSelectVisible"   width="30%">

    <div style="margin-top: 20px">
      <el-table
        :data="getPage"
        ref="singleTable"
        @cell-dblclick="handleRowCurrentChange"
        highlight-current-row
        border
        height="500"
        style="width: 100%">
        <el-table-column v-for="item in columnName" :key="item.id" :label="item.label" >
          <template slot-scope="scope">
            <span>{{scope.row[item.prop]}}</span>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[5, 10, 20, 40]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>


    </div>

  </el-dialog>
</template>

<script>

    export default {

      mounted(){
        this._listParent();
      },

        name: "SysRoleEdit",
      data(){
          return{
            currentPage:1, //初始页
            pageSize:10,    //    每页的数据
            total:0,    //    每页的数据
            getPage:[],
            columnName:[
              {prop:"username",label:"用户名",width:"120",fixed:true},
              {prop:"phone",label:"电话",width:"120"},
            ],
            formAdd:{
              roleName:'',
              parentName:'',
            },
            form:{
              roleName:'',
              parentName:'',
              pid:''
            },

            pNameList:[],
            parentName: '',

            dialogUserSelectVisible: false,

            formLabelWidth: '120px'
          }
      },
      methods:{
        _add(){

        },
          _open(){
            this.dialogUserSelectVisible=true;
            this._page();
          },


        handleSizeChange(val) {
          this.pageSize=val;
          this._page();
        },
        handleCurrentChange(val) {
          this.currentPage=val;
          this._page();
        },


        handleRowCurrentChange(val){
          console.log('val------',val)
          this.dialogUserSelectVisible=false;
          this.$emit('on-result-change', val)

        },


        _page(){
          this.$http.post('/sys_user/page?rows='+this.pageSize+'&page='+this.currentPage).then(res=>{
            let data= res.data.data;
            this.getPage=data.records;
            console.log('----------------data',data)
            console.log('-----------------',data.total)
            this.total=data.total;
          }).catch(err=>{
            console.log(err)
          });
        },

        _pNameChange(data){
            this.form.pid=data;
        },

        _listParent(){
          this.$http.get('/sys_role/list_parent').then(res=>{
                this.pNameList=res.data.data;
          }).catch(err=>{

          });
        },


          _ok(){
            let userData= this.form;
            if (undefined === userData.id){
              this.$http.post('/sys_role/add',userData).then(res=>{
                this.$message({
                  type: 'success',
                  message: '添加成功!'
                });
                this.$emit('on-result-change')
                this.dialogFormVisible = false;

              }).catch(err=>{
                this.$message({
                  type: 'info',
                  message: '添加失败'
                });
              })

            } else {
              this.$http.put('/sys_role/'+userData.id,userData).then(res=>{
                this.$message({
                  type: 'success',
                  message: '编辑成功!'
                });
                this.$emit('on-result-change')
                this.dialogFormVisible = false;

              }).catch(err=>{
                this.$message({
                  type: 'info',
                  message: '编辑失败'
                });
              })
            }




          }

      },
    }
</script>

<style scoped>

</style>
